<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
<!-- 左侧放大镜容器 -->
<div class="container">
    <div class="small"> 
        <!-- 贴膜 -->
        <div class="wrap"></div>
        <!-- 左侧放大镜图片 -->
        <img src="images/timg.jpg" alt="">
        <!-- 小盒子 -->
        <span class="grayBox"></span>

        
    </div>
    <div class="choice-btn">
            <img src="images/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
    </div>
</div>
<!-- 大图容器 -->
<div class="big">
    <!-- 大图图片 -->
    <img src="images/timg.jpg" alt="">
</div>

    <script>
        // function Magnifier(){
        //     this.square = document.querySelector('.grayBox')
        //     this.smallBox = document.querySelector('.small')
        //     this.bigBox = document.querySelector('.big')
        //     this.bindEvent()
        // }
        // Magnifier.prototype.bindEvent = function(){
        //     var self = this
        //     this.smallBox.onmouseover = function(){
        //         self.square.style.display = 'block'
        //         self.bigBox.style.display = 'block'
        //     }
        //     this.smallBox.onmouseout = function(){
        //         self.square.style.display = 'none'
        //         self.bigBox.style.display = 'none'
        //     }
        //     this.smallBox.onmousemove = function(e){
        //         e = e || window.event
        //         var squareW = self.square.offsetWidth
        //         var squareH = self.square.offsetHeight
        //         var smallW = self.smallBox.clientWidth
        //         var smallH = self.smallBox.clientHeight
        //         self.square.style.left = e.offsetX - squareW / 2 + 'px'
        //         self.square.style.top = e.offsetY - squareH / 2 + 'px'

        //         if(e.offsetY <= 50){
        //             self.square.style.top = '0px'
        //         }else if(e.offsetY >= smallH - 58){
        //             self.square.style.top = smallH - 100 + 'px'
        //         }
        //         if(e.offsetX <= 50){
        //             self.square.style.left = '0px'
        //         }else if(e.offsetX >= smallW - 58){
        //             self.square.style.left = smallW - 100 + 'px'
        //         }
              
        //     }
        // }

        // var mf = new Magnifier()
    </script>
    <script>
        // // 创建一个构造函数
        // function Magnifier(){
        //     // 获取小盒子
        //     this.small_box = document.querySelector('.small')
        //     // 获取大盒子
        //     this.big_box = document.querySelector('.big')
        //     // 获取小盒子里的放大镜   先去原型对象里绑定一个事件函数
        //     this.square = document.querySelector('.grayBox')
        //     // 获取小盒子宽高
        //     this.small_box_size = {
        //         width : parseInt(getComputedStyle(this.small_box).width),
        //         height : parseInt(getComputedStyle(this.small_box).height)
        //     }
        //     // 获取放大镜宽高
        //     this.square_size = {
        //         width : parseInt(getComputedStyle(this.square).width),
        //         height : parseInt(getComputedStyle(this.square).height)
        //     }
        //     // 获取大盒子图片
        //     this.big_box_img = document.querySelector('.big img')
        //     // 获取大盒子宽高
        //     this.big_box_size = {
        //         width : parseInt(getComputedStyle(this.big_box).width),
        //         height : parseInt(getComputedStyle(this.big_box).height)
        //     }
        //     // 获取大盒子图片
        //     this.big_box_img_size = {
        //         width: parseInt(getComputedStyle(this.big_box_img).width),
        //         height : parseInt(getComputedStyle(this.big_box_img).height)
        //     }
        //     // 获取所有按钮
        //     this.btns = document.querySelectorAll('.choice-btn img')
        //     // 获取小盒子图片
        //     this.small_box_img = document.querySelector('.small img')
        //     // 调用事件函数
        //     this.bindEvent()
        // }

        // // 原型对象绑定一个事件函数
        // Magnifier.prototype.bindEvent = function(){
        //     // 把指向实例对象的this 赋值给self
        //     var self = this
        //     // 鼠标移到小盒子显示 大盒子和放大镜
        //     this.small_box.onmouseover = function(){
        //         self.big_box.style.display = 'block'
        //         self.square.style.display = 'block'
        //     }
        //     // 鼠标离开小盒子不显示 大盒子和放大镜
        //     this.small_box.onmouseout = function(){
        //         self.big_box.style.display = 'none'
        //         self.square.style.display = 'none'
        //     }
            
        //     // 在小盒子里移动放大镜的事件
        //     this.small_box.onmousemove = function(e){
        //         // 事件对象兼容
        //          e = e || window.event
        //          // 定义 小盒子最左边到鼠标位置的最大值 变量  , 回到构造函数定义小盒子的宽度 和 放大镜的宽度。因为在多频触发的事件里 会 回流
        //          var max_left = self.small_box_size.width - self.square_size.width
        //          var max_top = self.small_box_size.height - self.square_size.height
        //          // 定义 鼠标当前位置 和 放大镜以鼠标为中心居中的 变量
        //          var _left = e.offsetX - 50 
        //          var _top = e.offsetY - 50 
        //          // 规定边界 ： 如果 鼠标当前位置 大于 最大值 让他强行等于最大值
        //          if(_left >= max_left){
        //             _left = max_left
        //          }else if(_left <= 0){
        //             _left = 0
        //          }
        //          if(_top >= max_top){
        //             _top = max_top
        //          }else if(_top <= 0){
        //             _top = 0
        //          }
        //          // 让放大镜定位的left，top 随着 鼠标移动
        //          self.square.style.left = _left  + 'px'
        //          self.square.style.top = _top + 'px'

        //          // 计算比例值    鼠标当前位置 / 最大值 
        //          var prop_left = (_left / max_left).toFixed(2)
        //          var prop_top = (_top / max_top).toFixed(2)
                 
        //          // 让大盒子里面的img 跟随 小盒子 的比例 随鼠标移动 ，回构造函数 获取 大盒子图偏 和大盒子的宽高
        //          self.big_box_img.style.left = -(self.big_box_img_size.width - self.big_box_size.width) * prop_left + 'px'
        //          self.big_box_img.style.top = -(self.big_box_img_size.height - self.big_box_size.height) * prop_top + 'px'
        //     }

        //     // 循环判断按钮移入改变图片事件
        //     for(var i = 0 ; i < this.btns.length; i++){
        //         // 移入事件
        //         this.btns[i].onmouseover = function(){
        //             // 把当前的按钮里图片的src 赋给 大盒子里的图片
        //             self.big_box_img.src = this.src
        //             // 把当前的按钮里图片的src 赋给 小盒子里的图片
        //             self.small_box_img.src = this.src
        //         }
        //     }
        // }
        // // new 一个实例函数
        // new Magnifier()



        // 根据注释写代码 
              // 创建一个构造函数
            function Magnifier(){
                // 获取小盒子
                this.small_box = document.querySelector('.small')
                // 获取大盒子
                this.big_box = document.querySelector('.big')
                // 获取小盒子里的放大镜   先去原型对象里绑定一个事件函数
                this.square = document.querySelector('.grayBox')
                // 获取小盒子宽高
                this.small_box_size = {
                    width : parseInt(getComputedStyle(this.small_box).width),
                    height :parseInt(getComputedStyle(this.small_box).height)
                }
                // 获取放大镜宽高
                this.square_size = {
                    width : parseInt(getComputedStyle(this.square).width),
                    height : parseInt(getComputedStyle(this.square).height)
                }
                 // 获取大盒子图片
                this.big_box_img = document.querySelector('.big img')
                this.big_box_img_size = {
                    width : parseInt(getComputedStyle(this.big_box_img).width),
                    height : parseInt(getComputedStyle(this.big_box_img).height)
                }
                // 获取大盒子宽高
                this.big_box_size = {
                    width : parseInt(getComputedStyle(this.big_box).width),
                    height : parseInt(getComputedStyle(this.big_box).height)
                }
                 // 获取所有按钮
                this.btns = document.querySelectorAll('.choice-btn img')
                // 获取小盒子图片 
                this.small_box_img = document.querySelector('.small img')
                // 调用事件函数
                this.bindEvent()
            }
           


           

            
            
            

        // 原型对象绑定一个事件函数
        Magnifier.prototype.bindEvent = function(){
            // 把指向实例对象的this 赋值给self
            var self = this
            // 鼠标移到小盒子显示 大盒子和放大镜
            this.small_box.onmouseover = function(){
                self.big_box.style.display = 'block'
                self.square.style.display = 'block'
            }
            // 鼠标离开小盒子不显示 大盒子和放大镜
            this.small_box.onmouseout = function(){
                self.big_box.style.display = 'none'
                self.square.style.display = 'none'
            }
            // 在小盒子里移动放大镜的事件
            this.small_box.onmousemove = function(e){
                // 事件对象兼容
                e = e || window.event
                // 定义 小盒子最左边到鼠标位置的最大值 变量  , 回到构造函数定义小盒子的宽度 和 放大镜的宽度。因为在多频触发的事件里 会 回流
                var max_left = self.small_box_size.width - self.square_size.width
                var max_top = self.small_box_size.height - self.square_size.height
                // 定义 鼠标当前位置 和 放大镜以鼠标为中心居中的 变量
                var _left = e.offsetX - 50
                var _top = e.offsetY - 50
                // 规定边界 ： 如果 鼠标当前位置 大于 最大值 让他强行等于最大值
                if(_left <= 0){
                    _left = 0
                }else if(_left >= max_left){
                    _left = max_left
                }
                if(_top <= 0){
                    _top = 0
                }else if(_top >= max_top){
                    _top = max_top
                }
                // 让放大镜定位的left，top 随着 鼠标移动
                self.square.style.left = _left + 'px'
                self.square.style.top = _top + 'px'

                // 计算比例值    鼠标当前位置 / 最大值 
                var prop_left = (_left / max_left).toFixed(2)
                var prop_top = (_top / max_top).toFixed(2)
                // 让大盒子里面的img 跟随 小盒子 的比例 随鼠标移动 ，回构造函数 获取 大盒子图偏 和大盒子的宽高
                self.big_box_img.style.left = -(self.big_box_img_size.width - self.big_box_size.width) * prop_left + 'px'
                self.big_box_img.style.top = -(self.big_box_img_size.height - self.big_box_size.height) * prop_top +'px'
            }

            // 移入事件
            for(var i = 0 ; i < this.btns.length;i++){
                this.btns[i].onmousemove = function(){
                    self.big_box_img.src = this.src
                    self.small_box_img.src = this.src
                }
            }
        }

                 

                 


            

                
                    // 把当前的按钮里图片的src 赋给 大盒子里的图片

                    // 把当前的按钮里图片的src 赋给 小盒子里的图片


        // new 一个实例函数
        new Magnifier()
    </script>
</body>
</html>